<script setup>
  import { onMounted, ref } from 'vue'
  import userApi from '@/apis/user.js'

  const truckInfo = ref({})

  onMounted(() => {
    getTruckInfo()
  })

  async function getTruckInfo() {
    let { data } = await userApi.truck()
    truckInfo.value = data
    console.log(data)
  }
</script>

<template>
  <view class="page-container">
    <swiper
      class="truck-pictures"
      indicator-active-color="#fff"
      circular
      indicator-dots
    >
      <swiper-item>
        <image
          class="picture"
          mode="aspectFill"
          :src="truckInfo.pictureList[0].url"
        ></image>
      </swiper-item>
      <swiper-item>
        <image
          class="picture"
          mode="aspectFill"
          src="/static/uploads/truck_picture.jpg"
        ></image>
      </swiper-item>
    </swiper>
    <view class="truck-meta">
      <uni-list :border="false">
        <uni-list-item
          :border="false"
          title="车辆编号"
          :rightText="truckInfo.id"
        />
        <uni-list-item
          :border="false"
          title="车辆号牌"
          :rightText="truckInfo.licensePlate"
        />
        <uni-list-item
          :border="false"
          title="车型"
          :rightText="truckInfo.truckType"
        />
        <uni-list-item
          :border="false"
          title="所属机构"
          :rightText="truckInfo.currentOrganName"
        />
        <uni-list-item
          :border="false"
          title="载重"
          :rightText="truckInfo.allowableLoad"
        />
      </uni-list>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
